<style lang="less">
@import './eventTrack.less';
</style>
<template>
  <div class="search">
    <Row>
      <Col>
      <Card>
        <Row>
          <Form ref="searchForm"
                :model="searchForm"
                inline
                :label-width="70"
                class="search-form">
            <Form-item label="报警类型">
              <Poptip v-model="visible"
                      placement="right"
                      transfer="true"
                      trigger="hover">
                <Input type="text"
                       v-model="searchAlarmTypeCount"
                       :readonly="true"
                       placeholder="请输入报警类型"
                       style="width: 200px">
                <Tag>标签一</Tag>
                </Input>

                <div slot="content">
                  <Tabs type="card"
                        style="width:500px;">
                    <TabPane label="位置、速度、驾驶等">
                      <div>
                        <Checkbox :indeterminate="indeterminate1"
                                  :value="checkAll1"
                                  @click.prevent.native="handleCheckAll1">全选</Checkbox>
                      </div>
                      <CheckboxGroup v-model="checkAllGroup1"
                                     @on-change="checkAllGroupChange1">
                        <Checkbox label="超速报警"></Checkbox>
                        <Checkbox label="疲劳驾驶"></Checkbox>
                        <Checkbox label="2点到5点禁驾"></Checkbox>
                        <Checkbox label="卫星定位漂移"></Checkbox>
                      </CheckboxGroup>
                    </TabPane>

                    <TabPane label="图片判定">
                      <div>
                        <Checkbox :indeterminate="indeterminate2"
                                  :value="checkAll2"
                                  @click.prevent.native="handleCheckAll2">全选</Checkbox>
                      </div>
                      <CheckboxGroup v-model="checkAllGroup2"
                                     @on-change="checkAllGroupChange2">
                        <Checkbox label="智能设备报警（M）"></Checkbox>
                      </CheckboxGroup>
                    </TabPane>
                    <TabPane label="终端报警类型">
                      <div>
                        <Checkbox :indeterminate="indeterminate3"
                                  :value="checkAll3"
                                  @click.prevent.native="handleCheckAll3">全选</Checkbox>
                      </div>
                      <CheckboxGroup v-model="checkAllGroup3"
                                     @on-change="checkAllGroupChange3">
                        <Checkbox label="紧急报警(终端)"></Checkbox>
                      </CheckboxGroup>
                    </TabPane>
                    <TabPane label="智能设备">
                      <div>
                        <Checkbox :indeterminate="indeterminate4"
                                  :value="checkAll4"
                                  @click.prevent.native="handleCheckAll4">全选</Checkbox>
                      </div>
                      <CheckboxGroup v-model="checkAllGroup4"
                                     @on-change="checkAllGroupChange4">
                        <Checkbox label="未知"></Checkbox>
                        <Checkbox label="闭眼"></Checkbox>
                        <Checkbox label="打哈欠"></Checkbox>
                      </CheckboxGroup>
                    </TabPane>
                  </Tabs>
                  <div class="alarmType-operate">
                    <Button size="small"
                            @click="resetAlarmType"
                            class="float-r">重置</Button>
                    <Button size="small"
                            @click="confirmAlarmType"
                            type="primary"
                            class="float-r"
                            style="margin-right:5px;">确认</Button>
                  </div>
                </div>
              </Poptip>
            </Form-item>
            <Form-item label="车牌号">
              <Input type="text"
                     v-model="searchForm.licnum"
                     clearable
                     placeholder="请输入车牌号"
                     style="width: 200px" />
            </Form-item>
            <Form-item label="时间范围">
              <DatePicker type="datetime"
                          v-model="searchForm.eventStart"
                          placeholder="请选择事件开始时间"
                          :transfer="true"></DatePicker>&nbsp 到 &nbsp
              <DatePicker type="datetime"
                          v-model="searchForm.eventEnd"
                          placeholder="请选择事件结束时间"
                          :transfer="true"></DatePicker>
            </Form-item>
            <Form-item style="margin-left:-35px;"
                       class="br">
              <Button @click="handleSearch"
                      type="primary"
                      icon="ios-search">搜索</Button>
              <Button @click="handleReset">重置</Button>
            </Form-item>
          </Form>
        </Row>
        <Row class="operation">
          <Button @click="add"
                  type="primary"
                  icon="md-add"
                  v-has="'add'">添加终端</Button>
          <circleLoading v-if="operationLoading" />
        </Row>
        <!-- <Row>
            <Alert show-icon>
              已选择
              <span class="select-count">{{selectCount}}</span> 项
              <a class="select-clear" @click="clearSelectAll">清空</a>
            </Alert>
          </Row> -->
        <Row>
          <Table :loading="loading"
                 max-height="600"
                 border
                 :columns="columns"
                 :data="data"
                 sortable="custom"
                 @on-sort-change="changeSort"
                 @on-selection-change="showSelect"
                 ref="table"></Table>
        </Row>
        <Row type="flex"
             justify="end"
             class="page">
          <Page :current="searchForm.current"
                :total="total"
                :page-size="searchForm.size"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50,100]"
                size="small"
                show-total
                show-elevator
                show-sizer></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <!--event detail-->
    <event-detail :modalShow="detailModalVisible"
                  :eventItem="eventItem"
                  @listenModalForm="hideModal"></event-detail>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getEventPageList } from '@/api/monitor'
import circleLoading from '../../my-components/circle-loading.vue'
import eventDetail from './eventDetail.vue'
import {
  operationTypeSelect,
  plateColorSelect,
  eventStatusSelect,
  alarmStatusSelect
} from '@/libs/dict'
export default {
  name: 'event-track',
  components: {
    circleLoading,
    eventDetail
  },
  data() {
    return {
      searchAlarmTypeCount: '',
      indeterminate1: true,
      checkAll1: false,
      checkAllGroup1: [],
      indeterminate2: true,
      checkAll2: false,
      checkAllGroup2: [],
      indeterminate3: true,
      checkAll3: false,
      checkAllGroup3: [],
      indeterminate4: true,
      checkAll4: false,
      checkAllGroup4: [],
      operationTypeSelect: operationTypeSelect,
      plateColorSelect: plateColorSelect,
      eventStatusSelect: eventStatusSelect,
      alarmStatusSelect: alarmStatusSelect,
      loading: true,
      operationLoading: false,
      selectCount: 0,
      selectList: [],
      searchForm: {
        alarmType: '',
        licnum: '',
        companyName: '',
        eventStart: '',
        eventEnd: '',
        current: 1,
        size: 20,
        sort: 'createTime',
        order: 'desc'
      },
      detailModalVisible: false,
      modalTitle: '',
      eventItem: {},
      submitLoading: false,
      columns: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center',
        //   fixed: 'left'
        // },
        {
          title: '序号',
          type: 'index',
          width: 65,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '省市区',
          key: 'areaName',
          width: 180,
          sortable: true
        },
        {
          title: '企业名称',
          key: 'companyName',
          minWidth: 150,
          sortable: true
        },
        {
          title: '运营类型',
          key: 'operationType',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              this.operationTypeSelect.find(item => {
                return item.value == params.row.operationType
              }).label
            )
          }
        },
        {
          title: '车牌',
          key: 'licnum',
          width: 120,
          sortable: true
        },
        {
          title: '车牌颜色',
          key: 'plateColor',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              this.plateColorSelect.find(item => {
                return item.value == params.row.plateColor
              }).label
            )
          }
        },
        {
          title: '报警类型',
          key: 'alarmType',
          width: 120,
          sortable: true
        },
        {
          title: '报警状态',
          key: 'alarmStatus',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              this.alarmStatusSelect.find(item => {
                return item.value == params.row.alarmStatus
              }).label
            )
          }
        },
        {
          title: '事件状态',
          key: 'eventStatus',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              this.eventStatusSelect.find(item => {
                return item.value == params.row.eventStatus
              })
                ? this.eventStatusSelect.find(item => {
                    return item.value == params.row.eventStatus
                  }).label
                : ''
            )
          }
        },
        {
          title: '事件开始时间',
          key: 'eventStart',
          width: 150
        },
        {
          title: '事件结束时间',
          key: 'eventEnd',
          width: 150
        },
        {
          title: '创建时间',
          key: 'createDate',
          sortable: true,
          sortType: 'desc',
          width: 150
        },
        {
          title: '操作',
          key: 'action',
          width: 80,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  directives: [
                    {
                      name: 'has',
                      value: 'detail'
                    }
                  ],
                  on: {
                    click: () => {
                      this.detail(params.row)
                    }
                  }
                },
                '详情'
              )
            ])
          }
        }
      ],
      data: [],
      total: 0,
      eventDetailFresh: true //控制视频modal强制刷新组件
    }
  },
  methods: {
    init() {
      this.getEventList()
    },
    changePage(v) {
      this.searchForm.current = v
      this.getEventList()
      this.clearSelectAll()
    },
    changePageSize(v) {
      this.searchForm.size = v
      this.getEventList()
    },
    getEventList() {
      // 多条件搜索
      this.loading = true
      if (this.searchForm.eventStart instanceof Date) {
        this.searchForm.eventStart = dayjs(this.searchForm.eventStart).format(
          'YYYY-MM-DD HH:mm:ss'
        )
      }
      if (this.searchForm.eventEnd instanceof Date) {
        this.searchForm.eventEnd = dayjs(this.searchForm.eventEnd).format(
          'YYYY-MM-DD HH:mm:ss'
        )
      }
      getEventPageList(this.searchForm).then(res => {
        this.loading = false
        if (res.code == 0) {
          this.data = res.data.records
          this.total = res.data.total
        }
      })
    },
    handleSearch() {
      this.searchForm.current = 1
      this.searchForm.size = 20
      this.getEventList()
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.beanName = ''
      this.searchForm.current = 1
      this.searchForm.size = 20
      // 重新加载数据
      this.getEventList()
    },
    changeSort(e) {
      this.searchForm.sort = e.key
      this.searchForm.order = e.order
      if (e.order == 'normal') {
        this.searchForm.order = ''
      }
      this.getEventList()
    },
    detail(v) {
      this.eventItem = JSON.parse(JSON.stringify(v))
      this.detailModalVisible = true
    },
    remove(v) {
      this.$Modal.confirm({
        title: '确认删除',
        content: '您确认要删除终端 ' + v.deviceName + ' ?',
        loading: true,
        onOk: () => {
          deleteEvent(v.deviceTypeId).then(res => {
            this.$Modal.remove()
            if (res.code == 0) {
              this.$Message.success('删除成功')
              this.getEventList()
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
      })
    },
    showSelect(e) {
      this.exportData = e
      this.selectList = e
      this.selectCount = e.length
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false)
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content: '您确认要删除所选的 ' + this.selectCount + ' 条数据?',
        loading: true,
        onOk: () => {
          let ids = ''
          this.selectList.forEach(function(e) {
            ids += e.id + ','
          })
          ids = ids.substring(0, ids.length - 1)
          deleteEvent(ids).then(res => {
            this.$Modal.remove()
            if (res.success) {
              this.$Message.success('删除成功')
              this.clearSelectAll()
              this.getUserList()
            }
          })
        }
      })
    },
    hideModal() {
      this.detailModalVisible = false
      this.eventDetailFresh = false
      this.$nextTick(() => {
        this.eventDetailFresh = true
      })
    },
    handleCheckAll1() {
      if (this.indeterminate1) {
        this.checkAll1 = false
      } else {
        this.checkAll1 = !this.checkAll1
      }
      this.indeterminate1 = false

      if (this.checkAll1) {
        this.checkAllGroup1 = [
          '超速报警',
          '疲劳驾驶',
          '2点到5点禁驾',
          '卫星定位漂移'
        ]
      } else {
        this.checkAllGroup1 = []
      }
    },
    checkAllGroupChange1(data) {
      if (data.length === 4) {
        this.indeterminate1 = false
        this.checkAll1 = true
      } else if (data.length > 0) {
        this.indeterminate1 = true
        this.checkAll1 = false
      } else {
        this.indeterminate1 = false
        this.checkAll1 = false
      }
    },
    handleCheckAll1() {
      if (this.indeterminate1) {
        this.checkAll1 = false
      } else {
        this.checkAll1 = !this.checkAll1
      }
      this.indeterminate1 = false

      if (this.checkAll1) {
        this.checkAllGroup1 = [
          '超速报警',
          '疲劳驾驶',
          '2点到5点禁驾',
          '卫星定位漂移'
        ]
      } else {
        this.checkAllGroup1 = []
      }
    },
    checkAllGroupChange1(data) {
      if (data.length === 4) {
        this.indeterminate1 = false
        this.checkAll1 = true
      } else if (data.length > 0) {
        this.indeterminate1 = true
        this.checkAll1 = false
      } else {
        this.indeterminate1 = false
        this.checkAll1 = false
      }
    },
    handleCheckAll2() {
      if (this.indeterminate2) {
        this.checkAll2 = false
      } else {
        this.checkAll2 = !this.checkAll2
      }
      this.indeterminate2 = false

      if (this.checkAll2) {
        this.checkAllGroup2 = ['智能设备报警（M）']
      } else {
        this.checkAllGroup2 = []
      }
    },
    checkAllGroupChange2(data) {
      if (data.length === 1) {
        this.indeterminate2 = false
        this.checkAll2 = true
      } else if (data.length > 0) {
        this.indeterminate2 = true
        this.checkAll2 = false
      } else {
        this.indeterminate2 = false
        this.checkAll2 = false
      }
    },
    handleCheckAll3() {
      if (this.indeterminate3) {
        this.checkAll3 = false
      } else {
        this.checkAll3 = !this.checkAll3
      }
      this.indeterminate3 = false

      if (this.checkAll3) {
        this.checkAllGroup3 = ['紧急报警(终端)']
      } else {
        this.checkAllGroup3 = []
      }
    },
    checkAllGroupChange3(data) {
      if (data.length === 1) {
        this.indeterminate3 = false
        this.checkAll3 = true
      } else if (data.length > 0) {
        this.indeterminate3 = true
        this.checkAll3 = false
      } else {
        this.indeterminate3 = false
        this.checkAll3 = false
      }
    },
    handleCheckAll4() {
      if (this.indeterminate4) {
        this.checkAll4 = false
      } else {
        this.checkAll4 = !this.checkAll4
      }
      this.indeterminate4 = false

      if (this.checkAll4) {
        this.checkAllGroup4 = ['未知', '闭眼', '打哈欠']
      } else {
        this.checkAllGroup4 = []
      }
    },
    checkAllGroupChange4(data) {
      if (data.length === 3) {
        this.indeterminate4 = false
        this.checkAll4 = true
      } else if (data.length > 0) {
        this.indeterminate4 = true
        this.checkAll4 = false
      } else {
        this.indeterminate4 = false
        this.checkAll4 = false
      }
    },
    resetAlarmType() {
      this.indeterminate1 = false
      this.checkAll1 = false
      this.checkAllGroup1 = []
      this.indeterminate2 = false
      this.checkAll2 = false
      this.checkAllGroup2 = []
      this.indeterminate3 = false
      this.checkAll3 = false
      this.checkAllGroup3 = []
      this.indeterminate4 = false
      this.checkAll4 = false
      this.checkAllGroup4 = []
      this.searchForm.alarmType = ''
      this.searchAlarmTypeCount = ''
    },
    confirmAlarmType() {
      let checkAllGroup = [
        ...this.checkAllGroup1,
        ...this.checkAllGroup2,
        ...this.checkAllGroup3,
        ...this.checkAllGroup4
      ]
      this.searchForm.alarmType = checkAllGroup.join(',')
      this.searchAlarmTypeCount = `已选择${checkAllGroup.length}个`
    }
  },
  mounted() {
    this.init()
  }
}
</script>